<template>
  <div class="notice-container">
    <div class="header-section">
      <h1 class="page-title">Notice Board</h1>
      <div class="admin-actions" v-if="noticedata.isAdmin">
        <el-button
            type="primary"
            :icon="Plus"
            circle
            @click="noticeshowdialog()"
            class="add-button"
        />
      </div>
    </div>

    <div class="notice-list">
      <div
          class="notice-card"
          v-for="item in noticedata.list"
          :key="item.id"
      >
        <div class="notice-content">
          <h3 class="notice-title">{{item.title}}</h3>
          <p class="notice-text">{{item.content}}</p>
          <div class="notice-meta">
            <span class="notice-date"><label v-if="item.name != null">{{item.name}} - </label>{{item.createtime}}</span>
            <el-button
                v-if="noticedata.isAdmin"
                type="danger"
                :icon="Delete"
                circle
                @click="doDeleteNotice(item.id)"
                class="delete-button"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="pagination-wrapper">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="noticedata.pageNum"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="noticedata.total"
          class="custom-pagination"
      />
    </div>

    <!-- Notice Dialog -->
    <el-dialog
        v-model="noticedialogFormVisible"
        title="Create Notice"
        width="500px"
        class="notice-dialog"
    >
      <el-form>
        <el-input v-model="onenotice.id" type="hidden"/>
        <el-form-item label="Title">
          <el-input
              v-model="onenotice.title"
              autocomplete="off"
              placeholder="Enter notice title"
              class="dialog-input"
          />
        </el-form-item>
        <el-form-item label="Content">
          <el-input
              v-model="onenotice.content"
              type="textarea"
              :rows="4"
              placeholder="Enter notice content"
              class="dialog-textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-actions">
          <el-button
              @click="noticedialogFormVisible = false"
              class="cancel-button"
          >
            Cancel
          </el-button>
          <el-button
              type="primary"
              @click="doSubmitNotice()"
              class="confirm-button"
          >
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// Import statements remain the same
//import TopHeader from '../../components/TopHeader.vue' // 引用Header组件
//import TopBottom from '../../components/TopBottom.vue' // 引用Header组件
import {
  Link,
  Delete,
  Edit,
  Message,
  Plus,
  Star,
} from '@element-plus/icons-vue'
import { reactive,ref,onMounted} from 'vue'
import { getAllCourseList } from '../../api/course.ts'
import { getSysNoticeList,isAdmin,saveNotice,deleteNotice } from '../../api/notice.ts'

const env = import.meta.env
const serverurl:string = env['VITE_APP_BASE_API']

const noticedialogFormVisible = ref(false)
const formLabelWidth = '140px'

//课程列表
const teadata = reactive({
  list:[]
})
const noticedata = reactive({
  list:[],
  pageNum: 1,
  pageSize: 10,
  total:0,
  isAdmin:false
})
const onenotice = reactive({
  id:null,
  title:'',
  content:'',
  courseid:null
})

onMounted(() => {
  loaddata();
})

function loaddata()
{
  const regdata = {"pagenum":noticedata.pageNum,"pagesize":noticedata.pageSize};

  getSysNoticeList(regdata).then((res) => {
    if (res.code == 200)
    {
      noticedata.list = res.data;
      noticedata.total = res.page.total;
    }
  })
  isAdmin().then((res) => {
    if (res.code == 200)
    {
      noticedata.isAdmin = res.data;
    }
  })
}
function doSubmitNotice()
{
  this.noticedialogFormVisible = false
  saveNotice(onenotice).then((res) => {
    if (res.code == 200)
    {
      //更新下视图数据
      loaddata();
    }
  })
}
function noticeshowdialog()
{
  this.noticedialogFormVisible = true
  onenotice.id=null
  onenotice.title=''
  onenotice.content=''
}
function doDeleteNotice(id)
{
  deleteNotice({"id":id}).then((res) => {
    if (res.code == 200)
    {
      //更新下视图数据
      loaddata();
    }
  })
}
function handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
}
function handleCurrentChange(val) {
  console.log(`当前页: `+val);
  noticedata.pageNum = val;
  loaddata();

}
</script>

<style lang="less" scoped>
.notice-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;

  .page-title {
    font-size: 28px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
  }

  .admin-actions {
    display: flex;
    align-items: center;

    .add-button {
      background-color: #4f46e5;
      border: none;
      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
      transition: all 0.3s ease;

      &:hover {
        background-color: #4338ca;
        transform: scale(1.05);
      }
    }
  }
}

.notice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.notice-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
  border-left: 4px solid #4f46e5;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }

  .notice-content {
    padding: 20px;

    .notice-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 10px 0;
    }

    .notice-text {
      font-size: 15px;
      line-height: 1.6;
      color: #4a5568;
      margin: 0 0 15px 0;
    }

    .notice-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .notice-date {
        font-size: 13px;
        color: #718096;
      }

      .delete-button {
        background-color: #fef2f2;
        border: none;
        color: #ef4444;

        &:hover {
          background-color: #fee2e2;
        }
      }
    }
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;

  .custom-pagination {
    :deep(.btn-prev),
    :deep(.btn-next) {
      border-radius: 8px;
      border: 1px solid #e2e8f0;

      &:hover {
        color: #4f46e5;
      }
    }

    :deep(.number) {
      border-radius: 8px;
      border: 1px solid #e2e8f0;

      &:hover {
        color: #4f46e5;
      }
    }

    :deep(.active) {
      background-color: #4f46e5;
      color: white;
      border-color: #4f46e5;

      &:hover {
        color: white;
      }
    }

    :deep(.jumper) {
      input {
        border-radius: 8px;
        border: 1px solid #e2e8f0;

        &:focus {
          border-color: #4f46e5;
        }
      }
    }
  }
}

.notice-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
  }

  :deep(.el-dialog__header) {
    border-bottom: 1px solid #f0f0f0;
    padding: 20px;
    margin-right: 0;

    .el-dialog__title {
      font-weight: 600;
      color: #2c3e50;
    }
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #4a5568;
  }

  .dialog-input,
  .dialog-textarea {
    :deep(.el-input__inner),
    :deep(.el-textarea__inner) {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      transition: border-color 0.3s;

      &:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.2);
      }
    }
  }

  .dialog-textarea {
    :deep(.el-textarea__inner) {
      min-height: 120px !important;
    }
  }

  .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    .cancel-button {
      border-radius: 8px;
      border: 1px solid #e2e8f0;

      &:hover {
        color: #4f46e5;
        border-color: #c7d2fe;
      }
    }

    .confirm-button {
      background-color: #4f46e5;
      border: none;
      border-radius: 8px;

      &:hover {
        background-color: #4338ca;
      }
    }
  }
}

@media (max-width: 768px) {
  .notice-container {
    padding: 20px 15px;
  }

  .header-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;

    .page-title {
      font-size: 24px;
    }
  }

  .notice-card {
    .notice-content {
      padding: 15px;
    }
  }

  .notice-dialog {
    width: 90% !important;
  }
}
</style>
